<template>
    <!--   总经理-->
    <div class="wrapper login_wrap" :style="{height: bodyHeight + 'px'}">
        <div class="logo_wrapper">
            <!--            <img src="../../assets/logo.png" alt="">-->
            <div class="logo_text">{{role_name}}账号注册</div>
        </div>

        <!--   表单-->
        <div class="login_wrap_frame">
            <!-- 手机号登录 -->
            <div>
                <!--   :rules="rules" :model="ruleForm"-->
                <el-form  ref="ruleForm" class="login_form">
                    <el-form-item prop="name">
                        <el-input class="form_input" v-model="ruleForm.name"  placeholder="请输入真实姓名">
                            <template slot="prefix">
                                <i class="el-icon-user"></i><span>|</span>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input class="form_input" v-model="ruleForm.phone" maxlength="11" placeholder="请输入手机号">
                            <template slot="prefix">
                                <i class="el-icon-mobile-phone"></i><span>|</span>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input class="form_input" v-model="ruleForm.code" placeholder="请输入验证码">
                            <template slot="prefix">
                                <i class="el-icon-message"></i><span>|</span>
                            </template>
                            <el-button type="text" slot="suffix" class="code_btn"
                                       :disabled="codeBtnFlag" @click="getCode">{{count_down.codeText}}</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item class="el-btn">
                        <!--                        ruleForm-->
                        <el-button type="primary" @click="toRegister">注 册</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="login_null"></div>
        </div>
    </div>
</template>

<script>
    import { Message } from "element-ui";
    import _regular from "../utils/_regular";
    import api_user from "../api/api_user";
    import _url from "../utils/_url";
    import _wx from "../common/_wx";
    import _router from "../common/_router";

    export default {
        name: "register",
        data() {
            return {
                ruleForm: {
                    name: '',
                    phone: "",
                    code: "", //验证码
                    sms_val: '', //验证码
                    mobile_val: '', //手机号
                },

                count_down: {
                    codeText: '获取验证码',
                    codeBtnFlag: true,
                    count: '',
                    timer_code: null,
                },

                bodyHeight: 0,
                code: '', //url的code

                role_name: '',
                rid: ''
            };
        },

        created() {
            document.title = '注册';

            _wx.userinfo()

            this.rid = _url.getParam('rid')
            api_user.role(this.rid, this.init_role_name)
        },
        mounted() {
            this.bodyHeight = document.documentElement.clientHeight;
        },
        methods: {

            init_role_name(data) {
                this.role_name = data
            },

            //倒计时
            countTime() {
                // 正则验证
                const TIME_COUNT = 60;
                if (!this.count_down.timer_code) {
                    this.count_down.count = TIME_COUNT;
                    this.count_down.codeBtnFlag = true;
                    // 倒计时
                    this.count_down.timer_code = setInterval(() => {
                        if (this.count_down.count > 0 && this.count_down.count <= TIME_COUNT) {
                            this.count_down.codeBtnFlag = true;
                            this.count_down.count--;
                            this.count_down.codeText = `${this.count_down.count}s后重新获取`
                        } else {
                            this.count_down.codeBtnFlag = false;
                            clearInterval(this.count_down.timer_code);
                            this.count_down.timer_code = null;
                            this.count_down.codeText = `获取验证码`
                        }
                    }, 1000)
                }
            },
            // 获取验证码
            getCode(){
                // 正则验证
                if (_regular.is_mobile(this.ruleForm.phone)) {
                    let that = this
                    //获取验证码
                    api_user.code(that.ruleForm.phone, function (data) {
                        console.log(data)
                        that.ruleForm.sms_val = data;
                        that.ruleForm.mobile_val = that.ruleForm.phone
                        //发送验证码成功,验证码计数器
                        that.countTime();
                    })
                } else {
                    this.$message.error('手机号码格式不正确');
                }
            },
            // 注册ruleForm
            toRegister() {
                if (!this.ruleForm.name) {
                    Message('请输入您的姓名')
                    return;
                }
                if (!this.ruleForm.phone) {
                    Message('请输入您的手机号')
                    return;
                }
                if (!_regular.is_mobile(this.ruleForm.phone)) {
                    Message('请输入正确的手机号')
                    return;
                }
                if(!this.ruleForm.code) {
                    Message('请输入验证码')
                    return;
                }
                if(this.ruleForm.code != this.ruleForm.sms_val
                    ||this.ruleForm.phone != this.ruleForm.mobile_val){
                    Message('验证码或手机号不正确')
                    return;
                }
                let params = {
                    name: this.ruleForm.name,
                    phone: this.ruleForm.phone,
                    rid: this.rid
                }

                let that = this;
                api_user.register(params, function (data) {

                    _router.jmp_success('注册成功')
                })
            },
        },
        watch: {
            // 监听phone
            "ruleForm.phone":function (val) {
                if(_regular.is_mobile(val)){
                    this.count_down.codeBtnFlag = false;
                }else {
                    this.count_down.codeBtnFlag = true;
                }
            }
        },

    }
</script>

<style scoped lang="less">
    @import "../assets/style/login.less";
</style>
